<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        /* 全局样式重置 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /* 照片容器样式 */
        .group-photo-container {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            background: #fff;
            overflow: hidden;
        }

        /* 公共图片样式 */
        .group-photo-container img {
            object-fit: cover;
        }

        /* 单张照片样式 */
        .group-1 img {
            width: 98px;
            height: 98px;
        }

        /* 两张照片样式 */
        .group-2 img {
            width: 148px;
            height: 148px;
        }

        /* 三张照片样式 */
        .group-3 img:nth-child(1) {
            width: 148px;
            height: 148px;
        }

        .group-3 img:nth-child(2),
        .group-3 img:nth-child(3) {
            width: 148px;
            height: 148px;
        }

        /* 四张照片样式 */
        .group-4 img {
            width: 148px;
            height: 148px;
        }

        /* 五到九张照片样式 */
        .group-5-to-9 img {
            width: 98px;
            height: 98px;
        }
    </style>
</head>

<body>
<#assign count = photos?size>
<div class="group-photo-container
        <#if count == 1> group-1
        <#elseif count == 2> group-2
        <#elseif count == 3> group-3
        <#elseif count == 4> group-4
        <#else> group-5-to-9</#if>">
    <#list photos[0..*9] as photo>
        <img src="${photo}" />
    </#list>
</div>
</body>

</html>